<template>
  <div>
    <h2>登录页</h2>
    <div>
      <input type="text" placeholder="账号" />
      <input type="password" placeholder="密码" />
    </div>
    <!-- 声明式导航 -->
    <router-link to="/home">去首页</router-link>
    <button @click="fn">登录</button>
    <!-- query方式也支持直接在路径上进行拼接传参 -->
    <button @click="$router.push('/home?nickname=rose&age=99')">登录2</button>

    <button @click="fn2">登录-params传参</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn () {
      // 可以先判断账号密码是否正确，如果正确才跳转
      // 跳转到首页 -- 编程式导航
      //   this.$router.push('/home')

      // 携带参数--特点：参数会显示到路径上
      this.$router.push({
        // path: '/home',
        // path和name只要用一个即可，但是建议用name
        name: 'MyHome', // 路由名字,
        // query就是要携带的参数列表
        query: {
          nickname: 'jack',
          age: 19
        }
      })
    },

    fn2 () {
      // params传参--特点：参数不在路径上，刷新后参数也没了
      this.$router.push({
        name: 'MyHome',
        params: {
          nickname: 'jack',
          age: 19
        }
      })
    }
  }
}
</script>

<style></style>
